<!DOCTYPE html>
<html>
<head>
    <base href="/">
    <title>Cart</title>
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <link rel="stylesheet" href="layui/css/layui.css">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Custom Theme files -->
    <!--theme-style-->
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all"/>
    <!--//theme-style-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="keywords" content="New Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design"/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <!--fonts-->
    <!--<link href='http://fonts.useso.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>-->
    <!--<link href='http://fonts.useso.com/css?family=Roboto:400,100,300,500,700,900' rel='stylesheet' type='text/css'>&lt;!&ndash;//fonts&ndash;&gt;-->
    <!-- start menu -->
    <link href="css/memenu.css" rel="stylesheet" type="text/css" media="all"/>
    <script type="text/javascript" src="js/memenu.js"></script>
    <script>$(document).ready(function () {
        $(".memenu").memenu();
    });</script>
    <script src="js/simpleCart.min.js"></script>
    <style>
        .address-item {width:250px; height: 180px; margin-left: 6px; float: left; border: 1px solid #C9C5C5; border-radius: 5px; padding: 15px;margin-bottom: 10px;}
        #address::after { content: ""; display:block; clear:both; height:0px; overflow:hidden; }
        .default-address {border-color: #FF5722;}
    </style>
</head>
<body>
<!--header-->
<div class="header">
    <div class="header-top">
        <div class="container">
            <div class="search">
                <form action="shopping/goods" style="display: flex; gap: 8px;">
                    <input type="text" placeholder="Search" name="keywords">
                    <!--                    <input type="text" value="Search " onfocus="this.value = '';"-->
                    <!--                           onblur="if (this.value == '') {this.value = 'Search';}">-->
                    <button type="button" name="searchbtn" class="layui-btn layui-btn-sm layui-btn-primary" >搜索</button>
                </form>
            </div>
            <div class="header-left">
                <ul>
                    <li><a href="shopping/userinfo">User</a></li>
                    <!--                    <li><a href="shopping/login">Login</a></li>-->
                    <!--                    <li><a href="shopping/register">Register</a></li>-->
                    <li></li>
                </ul>
                <div class="cart box_1">
                    <a href="shopping/cart">
                        <h3>
                            <div class="total">
                                <span class="simpleCart_total"></span> (<span id="simpleCart_quantity"
                                                                              class="simpleCart_quantity"></span> items)
                            </div>
                            <img src="images/cart.png" alt=""/>
                        </h3>
                    </a>
                    <p><a href="javascript:;" class="simpleCart_empty">Empty Cart</a></p>
                </div>
                <div class="clearfix"></div>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
    <div class="container">
        <div class="head-top">
            <div class="logo">
                <a href="shopping/index"><img src="images/logo.png" alt=""></a>
            </div>
            <div class=" h_menu4">
                <ul class="memenu skyblue">
                    <li class="active grid"><a class="color8" href="shopping/index">Home</a></li>
                    <li><a class="color1" href="shopping/goods">Shop</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>


<div class="container">
    <div class="check">
        <h1>My Shopping Cart</h1>
        <form >
            <div class="col-md-9 cart-items cartItem">

            </div>
        </form>

        <div class="col-md-3 cart-total">
            <a class="continue" href="shopping/index" style="background-color: #009587">Back to shop</a>
            <div class="price-details">
                <h3>Price Details</h3>
                <span>Total Items</span>
                <span class="total1 cartTotal-item">0</span>
                <span>Selected Items</span>
                <span class="total1 cartTotal-number">0</span>
                <div class="clearfix"></div>
            </div>
            <ul class="total_price">
                <li class="last_price"><h4>TOTAL</h4></li>
                <li class="last_price cartTotal-price"><span>0.00</span></li>
                <div class="clearfix"></div>
            </ul>

            <div class="clearfix"></div>
            <a class="order" href="shopping/settlement">提交订单</a>
            <div class="total-item">
                <h3>Address</h3>
                <h4 class="cartTotal-address">请选择收货地址</h4>
                <button type="button" class="cpns layui-btn layui-btn-danger" onclick="xzdz()">修改地址</button>
                <p> &nbsp; 祝 &nbsp; &nbsp; 您 &nbsp; &nbsp; 购 &nbsp; &nbsp; 物 &nbsp; &nbsp; 愉 &nbsp; &nbsp; 快 &nbsp; </p>
            </div>
        </div>

        <div class="clearfix"></div>
    </div>
</div>

<div style="display: none" id="selectAddressWin">
</div>


<!--//content-->
<div class="footer">
    <div class="footer-class">
        <p><a>祝您购物愉快♥</a></p>
    </div>
</div>

<!--新增-->
<div style="display: none" id="addAddressWin" class="layui-form">
    <div class="layui-form-item">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-inline">
            <select name="provincecode2"  lay-filter="provincecode2">
                <option value='' selected disabled>请选择</option>
            </select>
            <input type="hidden" name="province">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-inline">
            <select name="citycode2" lay-filter="citycode2">
                <option value='' selected disabled>请先选择上一级</option>
            </select>
            <input type="hidden" name="city">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">区域</label>
        <div class="layui-input-inline">
            <select name="areacode2"  lay-filter="areacode2">
                <option value='' selected disabled>请先选择上一级</option>
            </select>
            <input type="hidden" name="area">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详细地址</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="Address">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系人</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="name">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="telephone">
        </div>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn layui-btn-sm  layui-btn-danger" type="button" id="addAddressBtn" onclick="qrtj()">提交</button>
    </div>
</div>

<!--修改-->
<div style="display: none" id="editAddressWin" class="layui-form">
    <input type="hidden" name="upid" id="upid">
    <div class="layui-form-item">
        <label class="layui-form-label">省份</label>
        <div class="layui-input-inline">
            <select name="provincecode" lay-filter="provincecode"></select>
            <input type="hidden" name="upprovince" id="upprovince">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">城市</label>
        <div class="layui-input-inline">
            <select name="citycode"  lay-filter="citycode"></select>
            <input type="hidden" name="upcity" id="upcity">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">区域</label>
        <div class="layui-input-inline">
            <select name="areacode"  lay-filter="areacode"></select>
            <input type="hidden" name="uparea" id="uparea">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">详细地址</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="upAddress" id="upAddress">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">联系人</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="upname" id="upname">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">电话</label>
        <div class="layui-input-inline">
            <input type="text" class="layui-input" name="uptelephone" id="uptelephone">
        </div>
    </div>
    <div class="layui-form-item">
        <button class="layui-btn layui-btn-sm  layui-btn-danger" type="button" onclick="bianjitj()">提交</button>
    </div>
</div>


<script src="layui/layui.all.js"></script>

<script>
    const $ = layui.$;
    const form = layui.form;
    const upload = layui.upload;

    function getCart() {
        $.ajax({
            url: "cart/list",
            data: {},
            async: false,
            success: function (cart) {
                let sumprice=0;
                let totalprice=0;
                var i=0;
                let itum=0;
                $(".cartItem").empty();
                for (i = 0; i < cart.length; i++) {
                    $(".cartItem").append("<div class='cart-header'><div class='clas"
                        +i+"'></div><div class='cart-sec simpleCart_shelfItem'><div class='cart-item cyc'><img src='"+cart[i].goods.defaultimg
                        +"' class='img-responsive' alt=/></div><div class='cart-item-info'><h3><a href='#'>"+cart[i].goods.name+"</a><span>"+cart[i].goods.info
                        +"</span></h3><ul class='qty'><li><p><button type='button' class='layui-btn layui-btn-sm layui-btn-danger' style='width: 30px' onclick='sendSubtract("+cart[i].goodsid+","+cart[i].number+")'>—</button></p></li><li><p>Num:<h4>"
                        +cart[i].number+"</h4></p></li><li><p><button type='button' class='layui-btn layui-btn-sm layui-btn-danger' style='width: 30px' onclick='sendAdd("
                        +cart[i].goodsid+")'>+</button></p></li><li><p><button class='layui-btn layui-btn-primary' style='width: 40px; text-align: center; padding: 5px; position: absolute;right: 5%;top: 30%;' id='ifcheck"+i+"' onclick='addCart("+cart[i].goodsid+")'></button></p></li></ul><div class='delivery'><p>Current Price: ￥ &nbsp;&nbsp;"
                        +cart[i].goods.price+"</p><span>Price When Added To Cart: ￥ &nbsp;&nbsp;"+cart[i].price_when_add+"</span><div class='clearfix'></div></div></div><div class='clearfix'></div></div></div>");
                    totalprice+=cart[i].goods.price*cart[i].number;
                    if(cart[i].selected===1){
                        $(`#ifcheck${i}`).text("√").removeClass('layui-btn-primary').addClass('layui-btn-warm');
                        // let abc="#ifcheck"+i;
                        // // document.getElementById(abc).value="√";
                        // $(abc).text("√");
                        sumprice+=(cart[i].number*cart[i].goods.price);
                        itum++;
                    }
                }
                $(".cartTotal-item").text(i);
                $(".cartTotal-number").text(itum);
                $(".cartTotal-price").text("￥  "+sumprice);
                $(".total").html("<span>￥ &nbsp;&nbsp; "+totalprice+"</span>(<span>"+i+"</span>items)");
                if(cart.length!==0){
                    $(".simpleCart_empty").text(" ");
                }
            }
        });
    }
    getCart();


    function sendAdd(id) {
        $.ajax({
            url: "cart/add",
            data: {goodsid:id},
            async: false,
            success: function (data) {
                $(".cartItem").empty();
                getCart();
            }
        });
    }
    function sendSubtract(id,number) {
        if(number>1){
            $.ajax({
                url: "cart/subtract",
                data: {goodsid:id},
                async: false,
                success: function (data) {
                    $(".cartItem").empty();
                    getCart();
                }
            });
        }else if(number==1){
            layer.confirm("继续减少，将从购物车中删除",function(){
                $.ajax({
                    url: "cart/del",
                    data: {goodsid:id},
                    async: false,
                    success: function (data) {
                        $(".cartItem").empty();
                        getCart();
                    }
                });
                layer.closeAll();
            })
        }
    }

    function addCart(goodsid) {
        $.ajax({
            url: "cart/cartgoodsstate",
            data: {goodsid:goodsid},
            async: false,
            success: function (data) {
                $(".cartItem").empty();
                getCart();
            }
        });
    }


    function getAddress(){
        $.ajax({
            url: "cart/useraddress",
            data: {},
            async: false,
            success: function (data) {
                for (let i = 0; i < data.length; i++) {
                    console.log(data[i]);
                    if(data[i].isdefault===1){
                        $(".cartTotal-address").empty();
                        $(".cartTotal-address").append(data[i].province + "-" + data[i].city + "-" + data[i].address + "<br>" + data[i].name + "<br>" + data[i].telephone);
                    }
                }
            }
        });
    }
    getAddress();

    $("[name='searchbtn']").click(function () {
        let searchtext=$("input[name='keywords']").val();
        location.href="shopping/goods?keywords="+searchtext;
    });

    function xzdz(){
        layer.open({
            type: 1,
            area: ['520px', '430px'],
            content:$("#selectAddressWin")
        });
    }
    function useraddress(){
        $.ajax({
            url: "user/getaddress",
            data: {},
            async: false,
            success: function (data) {
                $("#selectAddressWin").empty();
                for (let i = 0; i < data.length; i++) {
                    if(data[i].isdefault===1){
                        $("#selectAddressWin").append("<div class='address-item default-address' style='background-color: rgba(255,160,122,0.48)'><p id='addressname'>"+data[i].name+"</p><p id='addressphone'>"+data[i].telephone+"</p><p id='addressaddress'>"
                            +data[i].city+"-"+data[i].address+"</p><br/><br/><div class='layui-btn-group'><button class='layui-btn' type='button' onclick='bianji("
                            +data[i].id+")'>编辑</button></div></div>");
                        continue;
                    }
                    $("#selectAddressWin").append("<div class='address-item default-address'><div onclick='moren("+data[i].id+")'><p id='addressname'>"+data[i].name+"</p><p id='addressphone'>"+data[i].telephone+"</p><p id='addressaddress'>"
                        +data[i].city+"-"+data[i].address+"</p><br/><br/></div><div class='layui-btn-group'><button class='layui-btn' type='button' onclick='bianji("
                        +data[i].id+")'>编辑</button></div></div>");
                }
                if (data.length < 4) {
                    $("#selectAddressWin").append("<div class='address-item default-address' style='display: flex; flex-direction: column; align-items: center; justify-content: center;' onclick='xinzeng()'><p id='emptyaddress'>+</p><p id='newaddress'>新增地址</p></div>");
                }
            }
        });
    }
    useraddress();

    function moren(t){

        layer.confirm("修改地址，下次购物默认使用此地址",function(index) {
            layer.close(index);
            $.ajax({
                url: "user/defaultaddress",
                data: {id:t},
                async: false,
                success: function (data) {
                    useraddress();
                }
            });
        });
    }

    function bianji(t){
        $.ajax({
            url: "user/getaddressbyid",
            data: {id: t},
            async: false,
            success: function (data) {
                document.getElementById('upid').value = data.id;
                document.getElementById('upprovince').value = data.province;
                document.getElementById('upcity').value = data.city;
                document.getElementById('uparea').value = data.area;
                document.getElementById('upAddress').value = data.address;
                document.getElementById('upname').value = data.name;
                document.getElementById('uptelephone').value = data.telephone;
            }
        });

        layer.open({
            type: 1,
            area: ['500px', '600px'],
            content:$("#editAddressWin")
        });
    }

    function bianjitj(){
        let address= {};
        let id= $("input[name='upid']").val();
        let province=$("input[name='upprovince']").val();
        let city=$("input[name='upcity']").val();
        let area=$("input[name='uparea']").val();
        let Address=$("input[name='upAddress']").val();
        let name=$("input[name='upname']").val();
        let telephone=$("input[name='uptelephone']").val();
        if (id){address.id=id;}else{layer.msg("收货地址异常，请联系管理员"); return false;}
        if (province){address.province=province;}else{layer.msg("请选择省份"); return false;}
        if (city){address.city=city;}else{layer.msg("请选择城市"); return false;}
        if (area){address.area=area;}else{layer.msg("请选择地区"); return false;}
        if (Address){address.address=Address;}else{layer.msg("请填写详细地区"); return false;}
        if (name){address.name=name;}else{layer.msg("请填写收货人"); return false;}
        if (telephone){address.telephone=telephone;}else{layer.msg("请填写联系电话"); return false;}
        layer.confirm("确认地址无误?",function(index) {
            layer.close(index);
            layer.closeAll();
            console.log(address);
            $.ajax({
                url: "user/editaddress",
                data: address,
                async: false,
                success: function (data) {
                    useraddress();
                }
            });
        })
    }
    function xinzeng(){
        layer.open({
            type: 1,
            area: ['500px', '600px'],
            content:$("#addAddressWin")
        });
    }
    function qrtj(){
        let address= {};
        let province=$("input[name='province']").val();
        let city=$("input[name='city']").val();
        let area=$("input[name='area']").val();
        let Address=$("input[name='Address']").val();
        let name=$("input[name='name']").val();
        let telephone=$("input[name='telephone']").val();
        if (province){address.province=province;}else{layer.msg("请选择省份"); return false;}
        if (city){address.city=city;}else{layer.msg("请选择城市"); return false;}
        if (area){address.area=area;}else{layer.msg("请选择地区"); return false;}
        if (Address){address.address=Address;}else{layer.msg("请填写详细地区"); return false;}
        if (name){address.name=name;}else{layer.msg("请填写收货人"); return false;}
        if (telephone){address.telephone=telephone;}else{layer.msg("请填写联系电话"); return false;}
        layer.confirm("确认地址无误?",function(index) {
            //点击确认后执行函数
            layer.close(index);
            layer.closeAll();
            $.ajax({
                url: "user/addaddress",
                data: address,
                async: false,
                success: function (data) {
                    useraddress();
                }

            });
        })

    }

    showArea(100000, $("[name='provincecode']"));
    showArea(100000, $("[name='provincecode2']"));

    function showArea(code, $dom) {
        $.ajax({
            url: "https://restapi.amap.com/v3/config/district",
            data: {key: 'd5e466c74f37e2b1f89163a68a161ea7', keywords: code},
            success: function (result) {
                let children = result.districts[0].districts;
                $dom.empty();
                $dom.append($("<option selected disabled >请选择</option>"));
                for (let i = 0; i < children.length; i++) {
                    $dom.append($("<option value='" + children[i].adcode + "'>" + children[i].name + "</option>"));
                }
                form.render("select");
            }
        });
    }
    form.on('select(provincecode)', function (data) {
        let provincecode = data.value; //得到被选中的值
        showArea(provincecode, $("[name='citycode']"));
        let provincename = $(data.othis).find("input").val();
        $("[name='upprovince']").val(provincename);
        $("[name='upcity']").val(null);
        $("[name='uparea']").val(null);
    });
    form.on('select(citycode)', function (data) {
        let citycode = data.value; //得到被选中的值
        showArea(citycode, $("[name='areacode']"));
        let cityname = $(data.othis).find("input").val();
        $("[name='upcity']").val(cityname);
        $("[name='uparea']").val(null);
    });
    form.on('select(areacode)', function (data) {
        let areaname = $(data.othis).find("input").val();
        $("[name='uparea']").val(areaname);
    });

    form.on('select(provincecode2)', function (data) {
        let provincecode2 = data.value; //得到被选中的值
        showArea(provincecode2, $("[name='citycode2']"));
        let provincename2 = $(data.othis).find("input").val();
        $("[name='province']").val(provincename2);
    });
    form.on('select(citycode2)', function (data) {
        let citycode2 = data.value; //得到被选中的值
        showArea(citycode2, $("[name='areacode2']"));
        let cityname2 = $(data.othis).find("input").val();
        $("[name='city']").val(cityname2);
    });
    form.on('select(areacode2)', function (data) {
        let areaname2 = $(data.othis).find("input").val();
        $("[name='area']").val(areaname2);
    });

</script>

</body>
</html>
			